<template>
  <div class="page has-navbar" v-nav="{ title: title}">
    <div class="page-content text-center">
      <h2 class="padding" v-text="msg"></h2>
      <div class="color assertive text-center" v-on:click="goto('/vuexCounter')">
          <i class="ion-information-circled"></i>vuex使用
      </div>
      <div class="color positive"  v-on:click="goto('/service')">
        <i class="ion-information-circled"></i> 服务组件
      </div>
      <div class="color balanced"  v-on:click="goto('/news')">
        <i class="ion-information-circled"></i> 新闻中心
      </div>
      <div class="color energized" v-on:click="goto('/about')">
        <i class="ion-information-circled"></i> 关于我们
      </div>
      <div class="color calm" v-on:click="goto('/tabbar')">
        tabbar演示
      </div>
      <div class="color dark" v-on:click="goto('/loginDemo')">
        login登录
      </div>
      <div class="color royal" v-on:click="goto('/test')">
       test nav
      </div>
      <div class="color stable" v-on:click="goto('/vuexCounter')">
        Stable <span>#F5F5F5</span>
      </div>
      <div class="color light" v-on:click="goto('/accordion')">
         <i class="ion-information-circled"></i> accordion演示
      </div>
    </div>

  </div>
</template>
<script>
  export default {

    data() {
      return {
        title: 'Vonic 主界面home',
        msg: 'Hello  Baby :)'
      }
    },
    methods:{
      goto(view){
        $router.forward(view)
      }
    }
  }
</script>
<style>
  h2 {
    font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
    color: #888;
  }

  .page.has-navbar .page-content {
    padding-top: 100px;
    background-color: #efefef;
  }

  .color {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    border-radius: 2px;
    padding: 10px;
    margin: 10px 10px 10px 0;
  }

  .color.assertive {
    background: #ea5a49;
    color: #fff;
  }

  .color.positive {
    background: #4a90e2;
    color: #fff;
  }

  .color.balanced {
    background: #44cc00;
    color: #fff;
  }

  .color.energized {
    background: #ffbd17;
    color: #fff;
  }

  .color.calm {
    background: #11c1f3;
    color: #fff;
  }

  .color.royal {
    background: #b5b5b5;
    color: #fff;
  }

  .color.stable {
    background: #f5f5f5;
    color: #484746;
  }

  .color.light {
    background: #fff;
    color: #484746;
  }

  .color.dark {
    background: #484746;
    color: #fff;
  }

   
  div {
    display: block;
  }
</style>
